<template>
  <div class="gl_heightFull">
    <div v-if="orderDetail" v-loading="loading">
      <div class="gl_contentBox">
        <el-row type="flex" justify="space-between" class="gl_mb_10">
          <el-col class="text"><span class="text_color">订单号：</span>{{ orderDetail.orderNo }}</el-col>
        </el-row>
        <div v-if="orderDetail.creatorHeadImage" class="head_image">
          <img :src="getStaticPhotoUrl(orderDetail.creatorHeadImage)" alt="" class="head_image" @error="errorPhoto">
        </div>
        <div class="info">
          <div class="gl_mb_5">
            <span class="gl_pr_20">{{ orderDetail.creatorName }}</span>
            <el-tag v-if="orderDetail.creatorGenderCode" size="mini">{{ orderDetail.creatorGenderCode && orderDetail.creatorGenderCode == 'M' ? '男' : '女' }}</el-tag>
          </div>
          <el-row type="flex" justify="space-between">
            <el-col class="text" :span="6"><span class="text_color">备注：</span>{{ orderDetail.customerRemark ? orderDetail.customerRemark : '- -' }}</el-col>
            <el-col class="text text_color" :span="4">
              <span v-if="orderDetail.isOnlinePayment">线上支付</span>
              <span v-else>线下支付</span>
              <span v-if="orderDetail.channelTypeCode" class="gl_pl_15">
                <template v-for="ktem in dict.channelType">
                  {{ ktem.code === orderDetail.channelTypeCode ? ktem.value : '' }}
                </template>
              </span>
            </el-col>
          </el-row>
          <el-row type="flex" justify="space-between">
            <el-col class="text" :span="20">
              <p style="width:220px; display: inline-block;">
                <span class="text_color">下单时间：</span>
                <span v-if="orderDetail.orderDateTime == '0001-01-01T00:00:00'">- -</span>
                <span v-else>{{ orderDetail.orderDateTime | FormatDate('yyyy-MM-dd HH:mm:ss') }}</span>
              </p>
              <p style="display: inline-block;">
                <span class="text_color">付款时间：</span>
                <span v-if="orderDetail.payDateTime == '0001-01-01T00:00:00'">- -</span>
                <span v-else>{{ orderDetail.payDateTime | FormatDate('yyyy-MM-dd HH:mm:ss') }}</span>
              </p>
            </el-col>
            <el-col class="text text_color" :span="4">
              <span class="title gl_pl_20">￥{{ formatMoney(orderDetail.payPrice) }}</span>
            </el-col>
          </el-row>
          <el-row>
            <el-col class="text" :span="20">
              <p style="width:220px; display: inline-block;" class="gl_pr_15">
                <span class="text_color">订单状态：</span>
                <span v-if="orderDetail.orderStatusCode">
                  <template v-for="ktem in dict.orderStatus">
                    {{ ktem.code === orderDetail.orderStatusCode ? ktem.value : '' }}
                  </template>
                </span>
              </p>
              <p style="display: inline-block;">
                <span class="text_color">下单账号：</span>
                <span>{{ orderDetail.orderAccount || (orderDetail.creatorMobile ? orderDetail.creatorMobile : '- -') }}</span>
              </p>
            </el-col>
          </el-row>
        </div>

      </div>
      <div v-if="orderDetail.orderTypeCode == 'TrainingOrder'" class="gl_contentBox gl_mt_15">
        <TrainingOrder :detail="detail" />
      </div>
    </div>
    <div v-else class="gl_noData">
      <p>暂无数据</p>
    </div>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex';
import defaultPhoto from '@/assets/images/face_default.png';
import TrainingOrder from '@/components/Order/trainingOrder';
import {
  api_GET_TradeOrderDetails // 获取订单详情
} from '@/extend/api/swaggerApi/app.js';
import {
  Api_GET_TradeOrderDetailsQO
} from '@/lib/form/swaggerForm';
export default {
  name: 'GameAmountDetail',
  components: {
    TrainingOrder
  },
  data() {
    return {
      loading: false,
      defaultPhoto: defaultPhoto,
      Api_GET_TradeOrderDetailsQO: new Api_GET_TradeOrderDetailsQO(),
      orderDetail: {},
      detail: {}
    };
  },
  computed: {
    ...mapState({
      dict: state => state.dict.dict
    })
  },
  created() {
    this.getDict();
    this.getDetail();
  },
  methods: {
    // 获取字典
    ...mapActions({ getDict: 'dict/getDict' }),
    getDetail() {
      var that = this;
      that.loading = true;
      that.Api_GET_TradeOrderDetailsQO.OrderNo = this.$route.query.orderNo;
      api_GET_TradeOrderDetails(that.Api_GET_TradeOrderDetailsQO).then(res => {
        that.orderDetail = res;
        if (res.details) {
          that.detail = JSON.parse(res.details);
        }
        that.loading = false;
      }).catch(error => {
        that.$message({ type: 'error', message: error.error && error.error.message || '获取订单详情失败' });
        that.loading = false;
      });
    },
    // 获取图片地址
    getStaticPhotoUrl(relativeUrl) {
      if (!relativeUrl) return '';
      return WEB_CONFIG.VUE_APP_STATIC_FILE_RUL + relativeUrl;
    },
    // 默认头像
    errorPhoto() {
      const img = event.srcElement;
      img.src = this.defaultPhoto;
    },
    // 格式化货币格式 （分）
    formatMoney(num) {
      if (typeof num === 'number' && !Number.isNaN(num)) {
        // num 是数字类型 且不是 NaN
        let strNum = String(num); // 金额文本类型
        if (num >= 0) {
          strNum = strNum.padStart(3, '0'); // 用0填充保证最小三位数
          return strNum.slice(0, -2) + '.' + strNum.slice(-2); // 金额拼接
        } else {
          const _mark = strNum.slice(0, 1); // 负号
          const _noMark = strNum.slice(1); // 无负号数值
          strNum = _noMark.padStart(3, '0'); // 用0填充保证最小三位数
          return _mark + strNum.slice(0, -2) + '.' + strNum.slice(-2); // 金额拼接
        }
      } else {
        return '';
      }
    }
  }
};
</script>

<style scoped>
.head_image {
  width: 82px;
  height: 82px;
  display: inline-block;
  margin-right: 15px;
  border: 1px solid #efefef;
  vertical-align: top;
  border-radius: 50%;
  overflow: hidden;
}
.info {
  display: inline-block;
  vertical-align: top;
  width: calc(100% - 82px - 15px);
}
.title {
  font-size: 16px;
  color: #353434;
  font-weight: bold;
  line-height: 20px;
}
.text {
  font-size: 14px;
  color: #353434;
  font-weight: 400;
  line-height: 22px;
  margin-bottom: 5px;
}
.text_color {
  color: #939393;
}
.money_color {
  color: #f56c6c;
  font-size: 16px;
  font-weight: 600;
}
</style>
